{% extends 'base.html' %}

{% block title %}
    <title>Leaving Message</title>
{% endblock %}
{% block content %}
    <div class="row col-md-offset-3">
        <form action="" method="post" class="text-center">
            {{ form.csrf_token }}
            <div class="form-group">
                <h5 align="left" style="color: #8c8c8c">{{ form.name.label }}</h5>
                {{ form.name(class='form-control', style='width: 600px') }}
                {% for message in form.name.errors %}
                    <small class="error">{{ message }}</small><br>
                {% endfor %}
            </div>
            <div class="form-group text-center">
                <h5 align="left" style="color: #8c8c8c">{{ form.body.label }}</h5>
                {{ form.body(class='form-control', rows="3", style='width: 600px') }}
                {% for message in form.body.errors %}
                    <small class="error" style="color: red">{{ message }}</small><br>
                {% endfor %}
            </div>
            <p align="left">{{ form.submit(class='btn btn-secondary') }}</p>
        </form>
    </div>
{% endblock %}
{% block msgs_list %}
    <div class="row col-md-offset-3">
        <div class="list-group" style="width: 600px">
            <h5><strong>Total messages:{{ count }}</strong></h5>
            {% for message in messages %}
                <h5 class="text-success">{{ message.name }}
                    <small class="text-muted">{{ message.timestamp.strftime("%Y/%m/%d %H:%M") }}</small>
                </h5>
                <h5 class="text-info" style="width: 600px;word-break:break-all;">{{ message.body }}</h5>
                <hr>
            {% endfor %}
        </div>
        <nav aria-label="...">
            <ul class="pager">
                {% if prev_url %}
                    <li class="previous"><a href="{{ prev_url }}">Prev</a></li>
                {% else %}
                    <li class="previous disabled"><a href="{{ url_for('index') }}">Prev</a></li>
                {% endif %}
                {% if next_url %}
                    <li class="previous"><a href="{{ next_url }}">Next</a></li>
                {% endif %}
            </ul>
        </nav>
    </div>
{% endblock %}

